<template>
    <view class="root">
        <view class="banner">
            <image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill" />
            <view class="basic-info">
                <text class="username ellipsis">{{ userInfo.nickName }}</text>
                <text class="balance">
                    余额：{{ userInfo.balance || "0.00" }}
                </text>
            </view>

            <button
                v-if="!userInfo.nickName"
                open-type="getUserInfo"
                @getuserinfo="getUserInfo"
                hover-class="tap-hover"
                :plain="true"
                class="btn-todo"
            >
                授权信息 >
            </button>
            <button
                v-else-if="!userInfo.phoneNumber"
                open-type="getPhoneNumber"
                @getphonenumber="getPhoneNumber"
                hover-class="tap-hover"
                :plain="true"
                class="btn-todo"
            >
                绑定手机号码 >
            </button>
            <button v-else :disabled="true" :plain="true" class="btn-todo">
                已绑定尾号 {{ userInfo.phoneNumber.substring(7, 11) }}
            </button>
        </view>
        <view class="order">
            <navigator
                hover-stay-time="100"
                hover-class="tap-hover"
                url="order"
                class="title"
            >
                <text>我的订单</text>
                <label>
                    <text>全部</text>
                    <image
                        class="icon-more"
                        src="/static/images/icon-more.png"
                    />
                </label>
            </navigator>

            <view class="options">
                <navigator
                    hover-stay-time="100"
                    hover-class="tap-hover"
                    v-for="(option, index) in orderOptions"
                    :key="index"
                    :url="`order?type=${index}`"
                >
                    <image
                        :src="`/static/images/icon-${option.icon}Order.png`"
                        mode="aspectFit"
                    />
                    <text>{{ option.text }}</text>
                </navigator>
            </view>
        </view>

        <view class="options">
            <block v-for="(option, index) in myOptions" :key="index">
                <button
                    v-if="option.type === 'button'"
                    :plain="true"
                    :open-type="option.openType"
                    class="option"
                    @click="tapBtn(option)"
                >
                    <text>{{ option.title }}</text>
                    <label>
                        <text>{{ option.operation }}</text>
                        <image
                            class="icon-more"
                            src="/static/images/icon-more.png"
                        />
                    </label>
                </button>

                <navigator
                    v-else
                    class="option"
                    hover-stay-time="100"
                    hover-class="tap-hover"
                    :url="`${option.page}`"
                >
                    <text>{{ option.title }}</text>
                    <label>
                        <text>{{ option.operation }}</text>
                        <image
                            class="icon-more"
                            src="/static/images/icon-more.png"
                        />
                    </label>
                </navigator>
            </block>
        </view>
    </view>
</template>

<script lang="ts">
    import Vue from "vue";
    import Component from "vue-class-component";
    import { UserInfo } from "@/common/api.d";
    import request from "../libs/request";
    import { Storage, transformQueryString } from "@/libs/utils";

    type MyOption = {
        title: string;
        operation: string;
        page?: string;
        openType?: string;
        handle?: string;
        type?: "button" | "navigator";
    };

    type OrderOptions = Array<{
        icon: string;
        text: string;
    }>;

    @Component
    export default class Home extends Vue {
        code: string = "";

        userInfo: UserInfo | AnyObject = {};

        orderOptions: OrderOptions = [
            { icon: "pending", text: "待接单" },
            { icon: "processing", text: "进行中" },
            { icon: "completed", text: "已完成" },
            { icon: "cancelled", text: "已取消" },
        ];

        public get myOptions(): MyOption[] {
            const { identity } = this.userInfo;

            const transformIdentity: MyOption = identity
                ? { title: "我是乘客", operation: "切换" }
                : { title: "我是车主", operation: "查看" };

            return [
                { title: "我的钱包", page: "wallet", operation: "查看" },
                {
                    title: "在线客服",
                    operation: "进入",
                    type: "button",
                    openType: "contact",
                },
                { type: "navigator", page: "certification", ...transformIdentity },
                {
                    title: "邀请有奖",
                    page: "invite",
                    type: "navigator",
                    operation: "查看",
                },
                {
                    title: "扫码下单",
                    type: "button",
                    handle: "scan",
                    operation: "查看",
                },
            ];
        }

        private onShow(): void {
            this.userInfo = Storage.get("userInfo");
        }

        private onLoad(): void {
            // #ifdef MP-WEIXIN
            uni.login({ success: ({ code }) => (this.code = code) });
            // #endif
        }

        public tapBtn(option: MyOption): void {
            switch (option.handle) {
                case "scan":
                    if (this.userInfo.identity) {
                        uni.showLoading({ title: "Loading..." });
                        this.request.get("/api/qrcode").then(({ data }) =>
                            uni.previewImage({
                                urls: [data.base64_image],
                                complete: uni.hideLoading,
                            })
                        );
                        return;
                    }
                    uni.scanCode({
                        success: ({ path: url }) => {
                            uni.reLaunch({ url })
                        },
                    });
                    break;
                default:
                    return;
            }
        }

        public getUserInfo({ detail }: any): void {
            this.request.post("/api/bindUserInfo", detail.userInfo).then((res) => {
                Storage.update("userInfo", detail.userInfo);
                this.userInfo = Storage.get("userInfo");
            });
        }

        public async getPhoneNumber({ detail }: any): Promise<void> {
            const { encryptedData, iv } = detail;
            this.request
                .post("/api/getUserPhone", {
                    encryptedData,
                    iv,
                    code: this.code,
                })
                .then(({ data: { phoneNumber } }) => {
                    Storage.update("userInfo", { phoneNumber });

                    this.userInfo = Storage.get("userInfo");
                });
        }
    }
</script>

<style lang="scss" scoped>
    .root {
        .icon-more {
            margin-left: 10rpx;
            width: 10rpx;
            height: 18rpx;
        }
        > .banner {
            flex-direction: row;
            margin: 5rpx 30rpx;
            padding: 0 30rpx;
            height: 240rpx;
            align-items: center;
            background-image: linear-gradient(to right, #00ddd8, #418ee0);
            border-radius: 8rpx;
            .avatar {
                border-radius: 50%;
                background-color: #fff;
                width: 130rpx;
                height: 130rpx;
            }
            .basic-info {
                flex: 1;
                overflow: hidden;
                color: #fff;
                margin-left: 15rpx;
                .username {
                    font-size: 36rpx;
                }
                .balance {
                    font-size: 24rpx;
                }
            }
            .btn-todo {
                color: #5487e5;
                background-color: #fff;
                border: none;
                border-radius: 30rpx;
                font-size: 24rpx;
            }
        }

        > .order {
            margin: 40rpx 30rpx 0;
            padding: 30rpx 20rpx;
            background-color: #faf9f9;
            border-radius: 20rpx;
            .title {
                flex-direction: row;
                align-items: center;
                color: #1b1b1b;
                > text {
                    flex: 1;
                    font-size: 36rpx;
                }
                > label {
                    text {
                        font-size: 24rpx;
                    }
                }
            }
            .options {
                flex-direction: row;
                justify-content: space-between;
                margin: 60rpx 30rpx 0;
                > navigator {
                    flex-direction: column;
                    align-items: center;
                    image {
                        width: 47rpx;
                        height: 44rpx;
                    }
                    text {
                        margin-top: 30rpx;
                        font-size: 26rpx;
                    }
                }
            }
        }

        > .options {
            margin: 20rpx;
            color: #1b1b1b;
            .option {
                flex-direction: row;
                text-align: left;
                line-height: 1;
                margin: 0;
                border: none;
                padding: 30rpx;
                > text {
                    font-size: 36rpx;
                    flex: 1;
                }
                > label {
                    text {
                        font-size: 24rpx;
                    }
                }
            }
        }
    }
</style>
